<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>WEUI Cell 源码</title>

    <style>

    /* css reset  */

    * {

        margin: 0;

        padding: 0;

        outline: 0;/* 轮廓 不影响盒子模型计算的“边框”*/

    }



    /* inherit 会继承的css */

    html {

        /* ie */

        -ms-text-size-adjust: 100%;

        /* chrome 为首， 360浏览器  老年机， 强制放大文字， 不允许缩放文字 */

        -webkit-text-size-adjust: 100%;

    }



    body, html {

        height: 100%;

        /* 按上去的高亮颜色  移动端独有的  任何元素的默认高亮给干掉 */

        -webkit-tap-highlight-color: transparent;

    }

    body {

        /*  苹果  安卓  鸿蒙  默认添加苹果字体  */

        font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;

        --weui-BG-0: #111;

        --weui-BG-2: #191919;

        --weui-FG-0: rgba(255, 255, 255, 0.8);

        --weui-FG-1: rgba(255, 255, 255, 0.5);

        --weui-FG-3: rgba(255, 255, 255, 0.1);



    }

   

    .page, body {

        /* 

            css 变量 css2  css3  css4 

            多次使用 

        */

        background-color: var(--weui-BG-0);

    }

    .weui-cells__title {

        margin-top: 16px;

        margin-bottom: 3px;

        padding-left: 16px;

        padding-right: 16px;

        color: var(--weui-FG-1);

        font-size: 14px;

        line-height: 1.4;

    }

    /* title 有时候会加， 不加 */

    .weui-cells__title+.weui-cells {

        margin-top: 0;

    }

    .weui-cells {

        margin-top: 8px;

        background-color: var(--weui-BG-2);

        overflow: hidden;

        position: relative;

    }



    .weui-cells:before {

        content: ""; /* before css伪元素  元素的内容开始之前 必须给*/

        position: absolute;

        left: 0;

        top: 0;

        right: 0;

        height: 1px;

        /* 1px 边框在高清手机中还是有点粗 0.5px */

        border-top: 1px solid var(--weui-FG-3);

        color: var(--weui-FG-3);

        -webkit-transform-origin: 0 0;

        transform-origin: 0 0;

        -webkit-transform: scaleY(0.5);

        transform: scaleY(0.5);

        z-index: 2;

    }

    

    .weui-cell {

        padding: 16px;

        position: relative;

        /* 弹性布局早期叫box布局 */

        display: -webkit-box;

        display: -webkit-flex;

        display: flex;

        /* 纵轴的对其方式  默认垂直 */

        -webkit-box-align: center;

        -webkit-align-items: center;

        align-items: center;

        /*8位 好精密*/

        line-height: 1.41176471;

        font-size: 17px;

        color: var(--weui-FG-0);

    }

    .weui-cell__bd {

        /* 主元素 flex: 1 早期 box-flex   */

        -webkit-box-flex: 1;

        -webkit-flex: 1;

        flex: 1;

        min-width: 0;

    }

    .weui-cell__ft {

        text-align: right;

        color: var(--weui-FG-1);

    }

    .weui-cell_access .weui-cell__ft:after {

        content: '';

        width: 8px;

        height: 8px;

        border-top: 1px solid red;

        border-right: 1px solid red;
    }
    </style>
</head>
<body>
    <div class="weui-cells__title">设置</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <img src="" alt="" style="width: 20px; margin-right: 16px; display: block;">

            </div>
            <div class="weui-cell__bd">蓝牙</div>
            <div class="weui-cell__ft">打开</div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <img src="" alt="" style="width: 20px; margin-right: 16px; display: block;">
            </div>
            <div class="weui-cell__bd">蜂窝网络</div>
            <div class="weui-cell__ft">打开</div>
        </div>
    </div>
    <div class="weui-cells__title">带跳转的列表项</div>
    <div class="weui-cells">
        <a href="" class="weui-cell weui-cell_access">
            <div class="weui-cell__hd">
                <img src="" alt="" style="width: 20px; margin-right: 16px; display: block;">
            </div>
            <div class="weui-cell__bd">蓝牙</div>
            <div class="weui-cell__ft">打开</div>
        </a>
    </div>
</body>
</html>